<template>
	<view class="goal">
		<view style="display: flex;margin-bottom: 10rpx;align-items: center;">
			<view style="display: flex;align-items: center;width: 76%;">
				<text v-if="showMon" style="font-size: 47rpx;margin-left: 25rpx;">¥</text>
				<u--input border="bottom" :placeholder="placeholderCon" placeholderStyle='font-size:47rpx;color:#d2d2d2;'></u--input>
				<text v-if="showPerson">人</text>
			</view>
			<view style="display: flex;align-items:baseline;width:24%;justify-content:flex-end;">
				<u-icon size="23" color="#d2d2d2" style="margin-bottom: 13rpx;" name="close" @click="removeSelf"></u-icon>
			</view>
		</view>
		<view>
			<u--textarea style="width: 90%;margin:auto;border: 1px solid #ddd;height: 200rpx;" v-model="goalCon" placeholder="目标详情"></u--textarea>
		</view>
		<view style="width: 100%;text-align: right;">
			<button class="save">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
				required: true,
			},
			placeholderCon: {
				type: String,
				default: '00.00'
			},
			showPerson: {
				type: Boolean,
				default: false
			},
			showMon: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				goalCon: '',
			}
		},
		methods: {
			removeSelf() {
				uni.showModal({
					title: '确认删除',
					content: '您确定要删除这个方案吗？',
					success: (res) => {
						if (res.confirm) {
							this.$emit('remove', this.index);
						} else if (res.cancel) {
							console.log('用户取消了删除');
						}
					}
				});
			}
		}
	}
</script>
<style>
	.goal {
		width: 90%;
		background-color: #fff;
		line-height: 100rpx;
		border: 1px #ddd solid;
		margin: 20rpx 0;
		color: #d2d2d2;
		padding: 0 30rpx;
	}

	.save {
		background-color: #ff6600;
		color: #fffddd;
		width: 200rpx;
		height: 75rpx;
		line-height: 75rpx;
		display: inline-block;
		margin-top: 30rpx;
	}
</style>